<template>
<el-dialog
    v-model="pageStore.isShowMuteBox"
    title="禁言用户"
    width="500"
    destroy-on-close
    :close-on-click-modal="false"	
    :close-on-press-escape="false"
    draggable
    :center="true"
  >
    <div class="user-mute">
        <div class="day-wrapper" v-if="pageStore.type === 'lock'">
            <label>设置禁言天数</label>
            <el-select
                v-model="pageStore.days"
                placeholder="请选择禁言天数"
                style="width: 100px"
            >
            <el-option
                v-for="item in mute_options"
                :key="item"
                :label="item !== 36500?item+' 天':'永久'"
                :value="item"
            />
            </el-select>
        </div>
        <div class="wraning-text" v-else>
            <p>确定解禁此用户?</p>
        </div>
        <el-button type="primary" @click="muteUser" plain>确定</el-button>
    </div>
  </el-dialog>
</template>

<script setup>
import { defineEmits } from 'vue';
import {usePageStore} from '@/store/modules/page.js';
import { muteUserComment} from '@/api/index.js';
import { ElMessage,ElButton,ElDialog,ElOption,ElSelect } from 'element-plus';
const pageStore = usePageStore();
/*禁言操作弹窗*/
const mute_options = [1,3,7,15,30,150,365,3650,7300,36500];
// const mute_days = ref('1 天');//默认禁言天数是1
 const emit = defineEmits(['refresh']);
 //禁言/解禁用户
const muteUser=()=>{
        let uid=pageStore.uid;
        let days = pageStore.days;
        muteUserComment({uid,days}).then(res=>{
          if(res.status.code === 200){
            pageStore.isShowMuteBox = false;
            //触发父组件的刷新用户信息
            emit('refresh');
          }else{
            ElMessage.error(res.status.msg);
          }
        })
}
</script>

<style scoped lang='scss'>

.user-mute{
    display: flex;
    flex-direction: column;
    width:100%;
    justify-content: center;
    align-items:center;
    label{
        width:100px;
    }
    .day-wrapper{
        display:flex;
        align-items: center;
        margin-bottom: 10px;
    }
}

</style>